// 颜色变量
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 气象站专用颜色
$temperature-color: #ff6b6b;
$humidity-color: #4ecdc4;
$pressure-color: #45b7d1;
$light-color: #f9ca24;

// 渐变色
$temperature-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
$humidity-gradient: linear-gradient(135deg, #4ecdc4 0%, #26a69a 100%);
$pressure-gradient: linear-gradient(135deg, #45b7d1 0%, #1e88e5 100%);
$light-gradient: linear-gradient(135deg, #f9ca24 0%, #f0932b 100%);

// 背景色
$bg-color: #ffffff;
$bg-color-light: #f8f9fa;
$bg-color-dark: #1a1a1a;
$bg-color-overlay: rgba(0, 0, 0, 0.5);

// 文字颜色
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #c0c4cc;
$text-color-disabled: #c0c4cc;

// 边框颜色
$border-color: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 字体粗细
$font-weight-primary: 500;
$font-weight-secondary: 400;
$font-weight-bold: 700;

// 行高
$line-height-primary: 1.5;
$line-height-secondary: 1.2;

// 间距
$spacing-extra-small: 4px;
$spacing-small: 8px;
$spacing-medium: 16px;
$spacing-large: 24px;
$spacing-extra-large: 32px;

// 边框圆角
$border-radius: 4px;
$border-radius-small: 2px;
$border-radius-base: 4px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-lighter: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
$box-shadow-dark: 0 4px 8px 0 rgba(0, 0, 0, 0.12);

// 过渡动画
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-fade: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$transition-border: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-color: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

// Z-index
$z-index-normal: 1;
$z-index-top: 1000;
$z-index-popper: 2000;

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// 容器宽度
$container-max-width: 1200px;
$sidebar-width: 200px;
$sidebar-collapsed-width: 64px;
$header-height: 60px;

// 卡片样式
$card-border-radius: 8px;
$card-padding: 20px;
$card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$card-hover-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);

// 表格样式
$table-border-color: #ebeef5;
$table-header-bg: #f5f7fa;
$table-row-hover-bg: #f5f7fa;

// 表单样式
$input-border-color: #dcdfe6;
$input-focus-border-color: $primary-color;
$input-hover-border-color: #c0c4cc;
$input-disabled-bg: #f5f7fa;
$input-disabled-border-color: #e4e7ed;

// 按钮样式
$button-border-radius: 4px;
$button-padding-vertical: 12px;
$button-padding-horizontal: 20px;
$button-font-weight: 400;

// 数据可视化颜色
$chart-colors: (
  #5470c6,
  #91cc75,
  #fac858,
  #ee6666,
  #73c0de,
  #3ba272,
  #fc8452,
  #9a60b4,
  #ea7ccc
);

// 状态颜色
$status-online: #67c23a;
$status-offline: #f56c6c;
$status-warning: #e6a23c;
$status-unknown: #909399;

// 环境质量等级颜色
$quality-excellent: #67c23a;
$quality-good: #95d475;
$quality-moderate: #e6a23c;
$quality-poor: #f56c6c;
$quality-very-poor: #c45656;

// 趋势颜色
$trend-up: #f56c6c;
$trend-down: #67c23a;
$trend-stable: #909399;

// 混合模式函数
@function mix-color($color1, $color2, $weight: 50%) {
  @return mix($color1, $color2, $weight);
}

// 响应式混合器
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$breakpoint-xs - 1}) {
      @content;
    }
  }
  @if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) {
      @content;
    }
  }
  @if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) {
      @content;
    }
  }
  @if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  }
  @if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  }
}

// 卡片混合器
@mixin card-style {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: $card-border-radius;
  box-shadow: $card-shadow;
  padding: $card-padding;
  transition: $transition-base;
  
  &:hover {
    box-shadow: $card-hover-shadow;
  }
}

// 文本省略混合器
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 清除浮动混合器
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 居中混合器
@mixin center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}